<template>
  <page-header-wrapper :title="false" >
    <a-card :title="this.$route.params.id">
      <a-row v-for="(item,i) in loadData" :key="i">
        <div style="margin-top:15px">
          <div :style="{ borderBottom: '1px solid #E9E9E9' }">
            <a-checkbox
              :checked="checkAll"
              :indeterminate="indeterminate"
              @change="onCheckAllChange"
            >
              {{ item?.name }}
            </a-checkbox>
          </div>
          <br />
          <a-checkbox-group 
            :value="checkedList"
            :options="item?.children.map((itm) => itm.name )" />
        </div>
      </a-row >
      <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button htmlType="submit" type="primary" >保存</a-button>
        <!-- <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button> -->
      </a-form-item>
    </a-card>
  </page-header-wrapper>
</template>
  
  <script>
  export default {
    name: 'CompetenceSettingDetail',
    components: {
    
    },
    data () {
      return {
        checkAll:true,
        indeterminate:false,
        checkedList: ['王升'],
        state:{
            indeterminate: true,
            checkAll: false,
            checkedList: ['王升'],
        },
        loadData: [
          {
            name:'达臻贸易王升',
            children:[
              {
                name:'王升'
              },
              {
                name:'黄东亮'
              },
              {
                name:'店长'
              },
            ]
          },{
            name:'达臻东街店',
            children:[
              {
                name:'测试员工001'
              },
            ]
          },  
        ],
      }
    },
    methods: {
        onCheckAllChange(e){
            Object.assign(state, {
              checkedList: e.target.checked ? plainOptions : [],
              indeterminate: false,
            })
        }
    }
  }
  </script>